<template>
  <div class="top-bar">
    <div class="wrap top-bar-wrap">
      <div class="l">欢迎来到叩丁狼积分商城</div>
      <div class="r">
        <ul>
          <li @click="toShowToast">
            <img class="avatar" width="26" :src="userInfo.headImg" />
            用户名：{{ userInfo.nickName }}
          </li>
          <li>我的鸡腿：{{ userInfo.coin }}</li>
          <li>获取鸡腿</li>
          <li>叩丁狼官网</li>
          <li class="login-btn" @click="toLogin" v-show="!isLogined">登录</li>
          <li class="cart-btn" v-show="isLogined">
            <img src="../assets/img/cart.png" alt="" />
            <span @click="$router.push({ name: 'UserCart' })">购物车</span>
            <b>{{ cartTotal }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";
import { WeixinLoginApI } from "@/request/api";

export default {
  name: "TopBar",
  data() {
    return {
      // cartTotal: 0,
    };
  },
  watch: {
    // 现在登录状态下，如果我们⼿动删除token，切换路由的时候，购物⻋依然存在。这是因为登录状态依旧没有改变。
    // 监听路由解决以上问题
    // "$route.path": {
    //   handler(newvalue, oldvalue) {
    //     console.log("这个方法什么时候执行？？", newvalue, oldvalue);
    //     let mytoken = localStorage.getItem("x-auth-token"); // 获取 token
    //     // if (mytoken) {
    //     //   this.changeIsLogined(true);
    //     // } else {
    //     //   this.changeIsLogined(false);
    //     // }
    //     // 改变登录状态 上面 if 简化写法
    //     this.changeIsLogined(Boolean(mytoken));
    //   },
    // },
  },
  // 微信登录发送请求
  created() {
    // console.log("TopBar中的created执行了~~~");
    // 用 $nextTick替换 定时器 解决 登录之后立马提示二维码失效的bug
    // setTimeout(() => {}, 1000);
    this.$nextTick().then(async () => {
      // 微信扫码登录的核心代码：拿 临时票据（code）置换token
      let mycode = this.$route.query.code;
      // console.log(mycode);
      if (mycode) {
        // 发起扫码登录请求
        let res = await WeixinLoginApI({
          code: mycode,
        });
        // ---------------------
        // 以下为该项目的业务
        if (res.code == 0) {
          // 登录成功 , 直接复制Login组件中登录成功的代码
          // 1. 提示用户登录成功
          this.asyncIsShowToast({
            isShowToast: true,
            msg: "登录成功",
            type: "success",
          });
          // 3. 保存token值到localStorage中
          localStorage.setItem("x-auth-token", res["x-auth-token"]);
          // 4. 登录状态的切换，（隐藏登录按钮展示购物车按钮，展示用户名和头像）
          this.changeIsLogined(true);
          // 5.清除浏览器地址栏上面的code
          this.$router.push(this.$route.path);
          // 6.登录成功，发送请求，获取微信用户信息
          this.asyncChangeUserInfo();
        } else if (res.code == 400) {
          // code 过期
          // 1. 提示用户重新扫码，
          this.asyncIsShowToast({
            isShowToast: true,
            msg: "二维码已过期，请重新登录",
            type: "danger",
          });
          // 2. 并打开登录模态框
          this.changeIsShowLoginModal(true);
        } else if (res.code == 407) {
          // 用户的微信还没有在这个网站上绑定手机
          // 让用户绑定手机就行
          // 怎么绑定手机？？用手机号登录并携带uuid，后端会自动绑定
          //  1. 提示用户
          this.asyncIsShowToast({
            isShowToast: true,
            msg: "初次扫码需要绑定微信!",
            type: "warning",
          });
          // 2. 打开登录模态框
          this.changeIsShowLoginModal(true);
          // 3. 保存uuid
          // console.log(res);
          localStorage.setItem("uuid", res.uuid);
        }
      } else {
        // 没有code的情况才会执行这里面的代码-----用户没有登录的操作，或者用户本身就已经登录了。
        // 路由切换的时候让 TopBar 组件重载，效果就是路由的切换也能够引起created的执行
        let mytoken = localStorage.getItem("x-auth-token"); // 获取 token
        this.changeIsLogined(Boolean(mytoken)); // 改变登录状态

        // 在这里做判断，用户是否登录
        if (mytoken) {
          // 有登录，发送获取用户信息的请求
          // ？？登录过后，关闭浏览器，重新打开浏览器。
          this.asyncChangeUserInfo();
        } else {
          // 没有登录，还原初始值
          this.initUserInfo();
        }
      }
    });
  },
  computed: {
    // 1. 数组写法
    // ...mapState("loginStatus", ["isLogined"]),
    // 2. 对象写法不写命名空间
    ...mapState({
      isLogined: (state) => state.loginStatus.isLogined,
      cartTotal: (state) => state.userInfo.cartTotal,
      userInfo: (state) => state.userInfo.userInfo,
    }),
    // 3. 对象写法，写命名空间
    // ...mapState("loginStatus", {
    //   isLogined: "isLogined",
    // }),
  },
  methods: {
    // 第一个参数是命名空间
    // 1.数组写法
    // ...mapMutations("showLoginModal", ["changeIsShowLoginModal"]),
    // 2. 对象写法
    // ...mapMutations("showLoginModal", {
    //   changeIsShowLoginModal: "changeIsShowLoginModal",
    // }),
    // 3. 对象写法（不带命名空间）,直接写路径
    ...mapMutations({
      changeIsShowLoginModal: "showLoginModal/changeIsShowLoginModal",
      changeIsShowToast: "showToast/changeIsShowToast",
      changeIsLogined: "loginStatus/changeIsLogined",
      initUserInfo: "userInfo/initUserInfo",
    }),

    // 映射showToast中的asyncIsShowToast方法
    // 数组写法
    // ...mapActions("showToast", ["asyncIsShowToast"]),
    // 对象写法（路径，不写命名空间）
    ...mapActions({
      asyncIsShowToast: "showToast/asyncIsShowToast",
      asyncChangeUserInfo: "userInfo/asyncChangeUserInfo",
    }),
    // 对象写法（命名空间）
    // ...mapActions("showToast", {
    //   asyncIsShowToast: "asyncIsShowToast",
    // }),

    //展示登录模态窗口
    toLogin() {
      // 展示登录模态窗口，本质上修改vuex中的 isShowLoginModal 的值变为true
      this.changeIsShowLoginModal(true);
      // 4. 也可以直接提交一个commit 触发 mutations
      // this.$store.commit("showLoginModal/changeIsShowLoginModal", true);
    },
    // 展示提示框
    toShowToast() {
      // 显示与否 true
      // 提示文本 ‘登录成功’
      // 提示类型 ‘success’ ‘wraning’ ‘danger’
      let token = localStorage.getItem("x-auth-token");
      // 判断是否登录
      if (!token) {
        this.asyncIsShowToast({
          isShowToast: true,
          msg: "请先登录！！！",
          type: "danger",
        });
      }

      // 设置定时器，1.5后改变展示提示框的状态，隐藏提示框
      // setTimeout(() => {
      //   this.changeIsShowToast({
      //     isShowToast: false,
      //   });
      // }, 1500);
    },
  },
};
</script>

<style lang="scss" scoped>
.top-bar {
  height: 40px;
  background: #242b39;
  color: #fffefe;
  line-height: 40px;
  .top-bar-wrap {
    /* background-color: pink; */
    height: 40px;
    display: flex;
    justify-content: space-between;
    /*字体样式 */
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;
    .r {
      ul {
        display: flex;
        li {
          cursor: pointer;
          display: flex;
          align-items: center;
          margin-left: 20px;
          .avatar {
            border-radius: 50%;
            margin-right: 6px;
          }
          &.login-btn {
            width: 124px;
            height: 40px;
            background: #0a328e;
            justify-content: center;
          }
        }
      }
    }
  }
}
.cart-btn {
  width: 124px;
  height: 40px;
  background-color: #0a328e;
  justify-content: center;
  img {
    margin-right: 6px;
  }
  b {
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin-left: 6px;
    background-color: #f40;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
  }
}
</style>
